<template>
	<view>
		<pageHeader  @back='back' :fixed='true'>
			<text>关注粉丝</text>
		</pageHeader>
		<view style="height:121rpx"></view>
		<view class="title">
			<view class="title_bar" >
				<view class="title_bar_item" @tap="changeType" data-type='关注' >
					<text :class="{choose:type=='关注'}">{{personalUserId==userId?"我":"TA"}}的关注</text>
				</view>
				<view class="title_bar_item" @tap="changeType" data-type='粉丝'>
					<text :class="{choose:type=='粉丝'}">{{personalUserId==userId?"我":"TA"}}的粉丝</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="body_item" v-for="(item,index) in list" :key='index'>
				<image :src="item.headPicture" mode=""></image>
				<view class="message">
					<text class="name">{{item.nickname}}</text>
					<text class="sex">{{item.sex}}</text>
				</view>
				<view class="button is" v-if="item.isFocus=='N'&&userId!=item.userId" @tap="toFollow" :data-index='index' :data-id='item.userId'>
					<image src="/static/svg/addGuan.svg" mode=""></image>
					<text>关注</text>
				</view>
				<view class="button" v-if="item.isFocus=='Y'&&userId!=item.userId" @tap="toCancel" :data-index='index' :data-id='item.userId'>
					<text>{{type=='关注'?'取消关注':type=='粉丝'?'互相关注':''}}</text>
				</view>
			</view>
		</view>
		<view class="none" v-if="list.length<=0">
			<image src="/static/img/nonefans.png" mode=""></image>
			<text>暂无{{type=='关注'?'关注':type=='粉丝'?'粉丝':''}}</text>
		</view>
	</view>
</template>

<script>
	import url from '@/common/util/personal.js'
	import pageHeader from "@/components/header/header.vue"
	export default {
		components: {pageHeader},
		data() {
			return {
				type:"",
				userId:localStorage.getItem("userId"),
				personalUserId:"",
				list:[]
			};
		},
		onLoad(e) {
			this.personalUserId=e.personalUserId
			this.setType(e.type)
		},
		methods: {
			async getMessage(){
				let data={}
				let res
				if(this.type=='关注'){
					data.userId=this.userId
					data.otherId=this.personalUserId
					res=await url.getFocusInfo(data)
				}else if(this.type=='粉丝'){
					data.userId=this.userId
					data.otherId=this.personalUserId
					res=await url.getFansInfo(data)
				}
				if(res.code==0){
					this.list=res.data
				}
			},
			setType(type){
				this.type=type
				this.getMessage()
			},
			changeType(e){
				this.setType(e.currentTarget.dataset.type)
			},
			back(){
				uni.navigateBack({
					delta: 1
				})
			},	
			async toCancel(e){
				let index=e.currentTarget.dataset.index
				let id=e.currentTarget.dataset.id
				let res=await url.noFocus({userId:this.userId,focusUserId:id})
				if(res.code==0){
					this.list[index].isFocus='N'
				}
			},
			async toFollow(e){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				let index=e.currentTarget.dataset.index
				let id=e.currentTarget.dataset.id
				let res=await url.focusUser({userId:this.userId,focusUserId:id})
				if(res.code==0){
					this.list[index].isFocus='Y'
				}
			}
		}
	}
</script>

<style lang="scss">
.title{
	position: fixed;
	height: 121rpx;
	width: 750rpx;
	top: 88rpx;
	left: 0;
	z-index: 998;
	padding-top:17rpx ;
	background-color: #FFFFFF;
	border-bottom: 23rpx solid #F7F7F7;
	.title_bar{
		height: 83rpx;
		display: flex;
		align-items: center;
		.title_bar_item{
			height: 100%;
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				font-size: 28rpx;
				letter-spacing: 1rpx;
				color: #AEA8A2;
				line-height: 83rpx;
			}
			.choose{
				font-size:34rpx ;
				color:#333333 ;
				font-weight: bold;
				position: relative;
			}
		}
	}
}
.title_bar_item .choose::after{
	content: "";
	display: block;
	height:6rpx ;
	width: 34rpx;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #333333;
	border-radius: 5rpx;
}
.none{
	padding-top: 146rpx;
	display: flex;
	flex-flow: column;
	align-items: center;
	image{
		height:340rpx;
		width: 400rpx;
	}
	text{
		font-size:30rpx ;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 50rpx;
	}
}
.body{
	padding-left: 30rpx;
	padding-bottom: 30rpx;
	background-color: #FFFFFF;
	.body_item{
		height: 144rpx;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #EEEEEE;
		position: relative;
		image{
			height:84rpx ;
			width: 84rpx;
			border-radius: 50%;
		}
		.message{
			height: 84rpx;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			margin-left: 23rpx;
			.name{
				font-size: 30rpx;
				color:#333333 ;
				letter-spacing: 1rpx;
				line-height: 30rpx;
				position: relative;
				top: 8rpx;
			}
			.sex{
				font-size: 24rpx;
				color: #999999;
				letter-spacing: 1rpx;
				line-height: 24rpx;
				position: relative;
				bottom: 6rpx;
			}
		}
		.button{
			height: 48rpx;
			width: 160rpx;
			border: 1rpx solid #CCCCCC;
			border-radius: 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 30rpx;
			text{
				font-size:28rpx ;
				color:#999999 ;
				letter-spacing: 1rpx;
			}
		}
		.is{
			border-color:#C84739 ;
			width: 136rpx;
			image{
				height:20rpx ;
				width: 20rpx;
			}
			text{
				color: #C84739;
				margin-left: 13rpx;
			}
		}
	}
}
</style>

